import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'highlight.js/styles/default.css' //代码高亮的样式
import 'amfe-flexible' //引入amfe-flexible ->设置根标签字体大小（移动端适配）

// 全局导入vant
import Vant from 'vant';
import { Dialog } from 'vant';
Vue.use(Dialog);
import 'vant/lib/index.css';
Vue.use(Vant);

Vue.config.productionTip = false


import { Lazyload } from 'vant';

Vue.use(Lazyload, {
    preLoad: 0.8, //预加载范围，屏幕高度范围的百分比0-1，预加载范围
    error: 'https://img2.baidu.com/it/u=3751095442,3459205618&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=375', //如果懒加载失败，使用这个图片
    lazyComponent: true,
});




// 全局创建自定义指令
Vue.directive('fofo', {
    // el代表指令所在的标签,被插入到真实DOM时才会触发，如果标签用display:none,隐藏再出现，不会触发inserted
    inserted(el) {
        // 指令所在的van-search组件
        // 组件根标签是div，input在内部
        // 以上都是原生标签对象
        // 搜索页面el是div
        // 文章评论el是textarea
        // 以后el还可能是input
        // 知识点：原生的DOM.nodeName拿到标签的名字（注意：大写的字符串）
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
            el.focus()
        } else {
            // el本身不是输入框
            const theInput = el.querySelector('input')
            const theTextArea = el.querySelector('textarea')
                // if判断是因为：不一定能获取到，需要加判断，有值了，再执行focus（）函数
            if (theInput) theInput.focus()
            if (theTextArea) theTextArea.focus()
        }

    },
    update(el) { //指令所在标签，被更新时触发
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
            el.focus()
        } else {
            // el本身不是输入框
            const theInput = el.querySelector('input')
            const theTextArea = el.querySelector('textarea')
                // if判断是因为：不一定能获取到，需要加判断，有值了，再执行focus（）函数
            if (theInput) theInput.focus()
            if (theTextArea) theTextArea.focus()
        }
    }
})


// 挂载事件总线
// Vue.prototype.$bus = new Vue()


new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')